'use client';

import Image from "next/image";
import { useRouter } from 'next/navigation';

export default function Home() {
  const router = useRouter();

  const features = [
    {
      title: "智能生成",
      description: "基于AI技术,一键生成专业短视频内容",
      icon: "🎯"
    },
    {
      title: "多场景模板",
      description: "涵盖教育、娱乐、营销等多种场景模板",
      icon: "📚"
    },
    {
      title: "高效创作",
      description: "显著提升内容创作效率,让创作更轻松",
      icon: "⚡"
    },
    {
      title: "质量保证",
      description: "确保生成内容的专业性和准确性",
      icon: "✨"
    }
  ];

  const useCases = [
    {
      title: "教育培训",
      description: "快速生成知识点讲解、语言学习等教育视频",
      image: "/images/education.jpg" // 需要添加相应图片
    },
    {
      title: "营销推广",
      description: "制作产品介绍、品牌宣传等营销视频",
      image: "/images/marketing.jpg"
    },
    {
      title: "内容创作",
      description: "生成短视频、Vlog等各类创意内容",
      image: "/images/content.jpg"
    }
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <div className="bg-gradient-to-r from-[#FF3366] to-[#FF6B9B] text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              自媒体er的提效工具
            </h1>
            <p className="text-xl md:text-2xl mb-8 text-white/90">
              让AI为您的内容创作加速,提升创作效率
            </p>
            <button
              onClick={() => router.push('/products')}
              className="px-8 py-4 bg-white text-[#FF3366] rounded-lg text-lg font-medium
                hover:bg-gray-100 transition-colors duration-200"
            >
              立即体验
            </button>
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center mb-12">核心优势</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => (
              <div key={index} className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                <div className="text-4xl mb-4">{feature.icon}</div>
                <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
                <p className="text-gray-600">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Use Cases Section */}
      <div className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center mb-12">应用场景</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {useCases.map((useCase, index) => (
              <div key={index} className="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                <div className="h-48 bg-gray-200">
                  {/* 这里可以添加场景图片 */}
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-2">{useCase.title}</h3>
                  <p className="text-gray-600">{useCase.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="bg-gray-50 py-20">
        <div className="max-w-3xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold mb-4">开始您的创作之旅</h2>
          <p className="text-gray-600 mb-8">
            立即体验AI驱动的视频创作工具,让创作更轻松、更高效
          </p>
          <button
            onClick={() => router.push('/products')}
            className="px-8 py-4 bg-gradient-to-r from-[#FF3366] to-[#FF6B9B] text-white 
              rounded-lg text-lg font-medium hover:from-[#FF4775] hover:to-[#FF7EAA] 
              transition-all duration-200"
          >
            免费使用
          </button>
        </div>
      </div>
    </div>
  );
}
